<template>
  <a-card class="b-card-data" :style="{height:todayHr?'200px':'124px'}">
    <div class="title-tip-wrap d-jcs-aic">
      <div class="title-content">{{ title }}</div>
      <a-tooltip placement="top">
        <template slot="title">
          <span>{{ tips }}</span>
        </template>
        <a-icon class="tip-content" type="exclamation-circle"/>
      </a-tooltip>
    </div>
    <div class="data-num">{{ dataNum }}</div>
    <div v-if="todayHr" class="today-data">
      <span v-if="todayTitle">
        {{ todayTitle }}<span class="ml-10">{{ todayDataNum }}</span>
      </span>
    </div>
  </a-card>
</template>

<script>
    export default {
        name: 'BCardData',
        props: {
            /**
             * 标题
             */
            title: {
                type: String,
                default: ''
            },
            todayHr: {
                type: Boolean,
                default: true
            },
            tips: {
                type: String,
                default: ''
            },
            dataNum: {
                type: [Number, String],
                default: 0
            },
            todayTitle: {
                type: String,
                default: ''
            },
            todayDataNum: {
                type: [Number, String],
                default: ''
            }
        }
    }
</script>

<style lang="less">
    .b-card-data:hover {
        box-shadow: 0 4px 12px 0 rgba(51, 51, 51, .2);
    }

    .b-card-data {
        min-width: 200px;
        width: 24%;
        box-shadow: 0 2px 8px 0 rgba(51, 51, 51, .2);

        .title-content {
            font-size: 14px;
            font-weight: 600;
            color: #101010;
        }

        .tip-content {
            font-size: 18px;
            color: #8C8C8C;
        }

        .data-num {
            margin-top: 15px;
            font-size: 35px;
            font-weight: 600;
        }

        .today-data {
            margin-top: 16px;
            padding-top: 24px;
            font-size: 14px;
            color: #8C8C8C;
            border-top: 1px solid #D9D9D9;
        }

        .ml-10 {
            margin-left: 10px;
        }
    }
</style>
